import React, { Fragment } from 'react';
import './index.less'
import { Radio, message } from 'antd'
import http from 'libs/http'
import { Dialog } from 'components'

const { Group: RadioGroup } = Radio

export default class HomeWork extends React.Component {
  state = {
    answer: '',
    questionType: 1, // 1.选择题 2.填空题
    questionIndex: null, // 当前题号
    question: '', // 问题
    optionList: [], // 选项集合
    detailId: null, // 试题ID
    isOver: false,
    result: null,
    examId: null,
  }

  componentDidMount() {
    this.getQuestion()

  }

  onChange = (e) => {
    this.setState({
      answer: e.target.value
    });
  }

  //拉取试题
  getQuestion = () => {
    // const { id } = this.props.match.params;
    const paramsStr = window.location.hash.split('?')[1]
    const examId = paramsStr.split('=')[1]
    const showErrorNotice = true
    http.get('/student/business/getQuestion', { examId }, undefined, showErrorNotice).then(res => {
      console.log('%c 拉取试题', 'color: red;', res)
      const {
        type: questionType, // 1.选择题 2.填空题
        questionIndex, // 当前题号
        question, // 问题
        options: optionList, // 选项集合
        detailId, // 试题ID
      } = res.data
      this.setState(state => ({
        questionType, // 1.选择题 2.填空题
        questionIndex, // 当前题号
        question, // 问题
        optionList, // 选项集合
        detailId, // 试题ID
        questionNum: state.questionNum+1,
        answer: '',
        examId,
      }));
    })
  }

  //提交答案
  saveExamDetail = () => {
    const { detailId, answer } = this.state;
    const showErrorNotice = true
    http.post('/student/business/saveExamDetail', { detailId, answer }, undefined, showErrorNotice).then(res => {
      const { isOver, result } = res.data
      console.log('%c isOver, result', 'color: red;', isOver, result)
      if (!isOver) { // 未结束
        this.getQuestion();
      } else { // 结束
        this.setState({
          isOver,
          result,
        });
        // if(result != 1){
        //   this.lookErrorBook();
        // }
      }
    })
  }

  //学生自己提交答案
  studentSaveAnwster = () => {
    const { answer } = this.state;
    if (answer) {
      this.saveExamDetail();
    } else {
      message.warn('请选择或着输入答案');
    }
  }

  handleClose = () => {
    this.props.history.push('/student_center/my_courses/layout/live_course_list')
  }

  lookErrorBook = () => {
    const { examId } = this.state
    // setTimeout(() => {
      // this.props.history.push('/student_center_/my_courses/layout/error_book/'+examId)
    // }, 10000);
    this.props.history.push('/student_center_/my_courses/layout/error_book/'+examId)
  }

  render() {
    const { answer, questionType, optionList, questionIndex, question, isOver, result } = this.state
    
    return (
      <div className="homework-container">
        <div className="homework">
          <div className="progress-line">
            <div className="progress-inline inline-1"></div>
          </div>
          <div className="progress-bar">
            <div className="p-item activated">
              <i><b></b></i>
              <span><b>第一题</b></span>
            </div>
            <div className={questionIndex >= 2 ? 'p-item activated' : 'p-item'}>
              <i><b></b></i>
              <span><b>第二题</b></span>
            </div>
            <div className={questionIndex >= 3 ? 'p-item activated' : 'p-item'}>
              <i><b></b></i>
              <span><b>第三题</b></span>
            </div>
            <div className={questionIndex >= 4 ? 'p-item activated' : 'p-item'}>
              <i><b></b></i>
              <span><b>第四题</b></span>
            </div>
            <div className={questionIndex >= 5 ? 'p-item activated' : 'p-item'}>
              <i><b></b></i>
              <span><b>第五题</b></span>
            </div>
          </div>
          <div className="question-container">
            <span className="background_girl"></span>
            <div className="question-wrap">
              {
                questionType === 1 ? (
                  <Fragment>
                    <div>
                      <p className="question">{questionIndex}. {question}</p>
                      <RadioGroup 
                        onChange={this.onChange} 
                        value={answer}
                        size="large"
                        >
                        {
                          optionList.map((option, index) => {
                            const	{ code, desc, order } = option
                            return (
                              <p className="option" key={index}>
                                <Radio value={code}>{code}. {desc}</Radio>
                              </p>
                            )
                          })
                        }
                      </RadioGroup>
                    </div>
                  </Fragment>
                ) : (
                  <Fragment>
                    <div className="fill-blank">
                      <p className="question">{questionIndex}. {question}</p>
                      <p className="tips">（请在下方横线上输入正确答案）</p>
                      <input className="fill-blank" onChange={this.onChange} value={answer} />
                    </div>
                  </Fragment>
                )
              }
            </div>
            <span onClick={this.studentSaveAnwster} className="btn next-btn"></span>
          </div>
        </div>
        {
          isOver && (
            <div className="homework-result">
              <div className="result-bg">
                {/* <span onClick={this.handleClose} className="homework-close"></span> */}
                <span className={`result result-${result}`}></span>
                {/* <span className={`result result-1`}></span> */}
              </div>
              {/* <span className="btn" onClick={this.lookErrorBook}></span> */}
              { result == 1 ? <span className="btn-back" onClick={this.handleClose}></span> : <span className="btn" onClick={this.lookErrorBook}></span> }
            </div>
          )
        }
      </div>
    )
  }
}